<template>
  <el-dialog
    append-to-body
    title="分区设置"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <el-form ref="form" class="demo-form" label-width="100px" :model="form">
      <el-row>
        <el-col :span="8">
          <el-form-item label="开始角度" prop="startAngle">
            <el-input-number
              v-model="form.settings.startAngle"
              clearable
              controls-position="right"
              :max="360"
              :min="0"
              placeholder="开始角度"
              style="width: 100%"
            >
              <template slot="append">°</template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束角度" prop="endAngle">
            <el-input-number
              v-model="form.settings.endAngle"
              class="mr12"
              clearable
              controls-position="right"
              :max="360"
              :min="0"
              placeholder="结束角度"
              style="width: 100%"
            >
              <template slot="append">°</template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分区角度" prop="angle">
            <el-input-number
              v-model="form.settings.angle"
              class="mr12"
              clearable
              controls-position="right"
              :max="360"
              :min="1"
              placeholder="分区角度"
              style="width: 100%"
            >
              <template slot="append">°</template>
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="控制节点" prop="distances">
        <el-table
          border
          :data="form.settings.distances"
          :max-height="590"
          style="width: 100%"
        >
          <el-table-column align="center" label="距中心点距离" prop="date">
            <template #default="{ row }">
              <el-input-number
                v-model="row.distance"
                controls-position="right"
                placeholder="距中心点距离"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="起始喷头" prop="name">
            <template #default="{ row }">
              <el-input-number
                v-model="row.spstart"
                controls-position="right"
                placeholder="起始喷头"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束喷头" prop="address">
            <template #default="{ row }">
              <el-input-number
                v-model="row.spend"
                controls-position="right"
                placeholder="结束喷头"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="80">
            <template #header>
              <el-link icon="el-icon-plus" type="primary" @click="addDistance">
                增加
              </el-link>
            </template>
            <template #default="{ $index }">
              <el-link
                icon="el-icon-delete"
                type="danger"
                @click="deleteDistance($index)"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { dclassCodeMap } from '@/utils/constant'
  import { deepClone } from '@/utils'
  import { updateOne } from '@/api/deviceCloud'
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          serialno: '',
          settings: {},
        },
      }
    },
    computed: {
      ...mapGetters(['devices']),
      devicesFilter() {
        return this.devices.filter((val) => {
          return +val.product_type === dclassCodeMap.pg && val.map_show > 0
        })
      },
    },
    watch: {
      devicesFilter: {
        handler(newVal) {
          console.log(newVal)
          if (newVal && newVal.length > 0) {
            const { serialno, settings } = deepClone(newVal[0])
            this.form = { serialno, settings }
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      show() {
        this.dialogVisible = true
      },
      async submit() {
        const { serialno, settings } = this.form
        const postData = {
          serialno,
          settings,
        }
        const { msg } = await updateOne(serialno, postData)
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
        this.dialogVisible = false
        this.$store.dispatch('device/getAll', { project_id: 11 })
      },
      addDistance() {
        this.form.settings.distances.push({
          distance: 0,
          spstart: 0,
          spend: 0,
        })
      },
      deleteDistance(index) {
        this.form.settings.distances.splice(index, 1)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
